<html>
<head>
  <style type="text/css">{ margin: 0; padding: 0; }</style>
  <script type="text/javascript" src="./assets/mermaid.min.js"></script>
  <script type="text/javascript" src="./assets/jquery.js"></script>

<link rel="stylesheet" href="./assets/mermaid.css"/>
  <script>

    mermaid.initialize({
      startOnLoad: true,
      cloneCssStyles: true,
      flowchart: {
        htmlLabels: false,
        useMaxWidth:false
      },
    });

    function renderToSvg(mermaidCode) {

      var container = document.getElementById("container")
      var holder = document.getElementById("mermaid-holder");

      while (holder.firstChild) {
        holder.removeChild(holder.firstChild);
      }

      el = document.createElement("div");
      el.innerHTML = mermaidCode;
      el.className = 'mermaid';

      holder.appendChild(el);

      mermaid.init();
      var xmlSerializer = new XMLSerializer()
      svgValue = xmlSerializer.serializeToString(container)

      return svgValue;
    }

    // for debug and test rendering directly in browser
    //$( document ).ready(function() {
    //  var mm = "graph LR\nA[Hard edge] -->|Link text| B(Round edge)\nB --> C{Decision}\nC -->|One| D[Result one]\nC -->|Two| E[Result two]";
    //  renderToSvg(mm);
    //});

  </script>


</head>
<body>
  <div id="container" class="mermaid-container">
    <div id="mermaid-holder"></div>
  </div>
</body>
</html>
